/*
 * basic version branch from https://github.com/w3cmark/css3
 */

.pre(@style,@value){
  -webkit-@{style}: @value;
  -moz-@{style}: @value;
  -ms-@{style}: @value;
  @{style}: @value;
}
//动画
.transition(@arg){
  .pre(transition,@arg);
}
.transition-delay(@delay:0) {
  .pre(transition-delay,@delay);
}
.transition-duration(@duration:200ms) {
  .pre(transition-duration,@duration);
}
.transition-property(@property:all) {
  .pre(transition-property,@property);
}
.transition-timing-function(@function:ease) {
  .pre(transition-timing-function,@function);
}
.transform(@arg){
  .pre(transform,@arg);
}
.transform-origin(@args) {
  .pre(transform-origin,@args);
}
.transform-style(@style) {
  .pre(transform-style,@style);
}
.rotate(@deg:45deg){
  .transform(rotate(@deg));
}
.scale(@factor:.5){
  .transform(scale(@factor));
}
.translate(@x,@y){
  .transform(translate(@x,@y));
}
.translate3d(@x,@y,@z){
  .transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
  .translate(@x,@y);
  .pre(transform,translate3d(@x,@y,0));
}
//animation

.animation(@value){
  .pre(animation,@value);
}

.animation-delay(@delay) {
  .pre(animation-delay,@delay);
}
.animation-direction(@direction) {
  .pre(animation-direction,@direction);
}
.animation-duration(@duration) {
  .pre(animation-duration,@duration);
}
.animation-fill-mode(@mode) {
  .pre(animation-fill-mode,@mode);
}
.animation-iteration-count(@count) {
  .pre(animation-iteration-count,@count);
}
.animation-name(@name) {
  .pre(animation-name,@name);
}
.animation-play-state(@state) {
  .pre(animation-play-state,@state);
}
.animation-timing-function(@function) {
  .pre(animation-timing-function,@function);
}
.keyframes(@name) {
  @-webkit-keyframes @name {
    .-frames(-webkit-)
  }
  @-moz-keyframes @name {
    .-frames(-moz-)
  }
  @-o-keyframes @name {
    .-frames(-o-)
  }
  @-ms-keyframes @name {
    .-frames(-ms-)
  }
  @keyframes @name {
    .-frames()
  }
}

//flex
.flex(@arg){
  .pre(flex,@arg);
}
.flexbox(){
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
//opacity
.opacity(@number){
  opacity: @number / 100;
  filter:alpha(opacity=@number);
}
// border
.border-color(@arg){
  .pre(border-color,@arg);
}
.border-image(@arg){
  .pre(border-image,@arg);
}
.border-radius(@arg){
  .pre(border-radius,@arg);
}
//background
.background-origin(@arg){
  .pre(background-origin,@arg);
}
.background-clip(@arg){
  .pre(background-clip,@arg);
}
.background-size(@arg){
  .pre(background-size,@arg);
}
//box
.box-shadow(@arg){
  .pre(box-shadow,@arg);
}
.box-sizing(@arg){
  .pre(box-sizing,@arg);
}
//columns
.columns(@args) {
  .pre(columns,@arg);
}
.column-count(@count) {
  .pre(column-count,@arg);
}
.column-gap(@gap) {
  .pre(column-gap,@arg);
}
.column-width(@width) {
  .pre(column-width,@arg);
}
.column-rule(@args) {
  .pre(column-rule,@arg);
}
// Gradients

.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
  .linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}

//animation lib
.bounce(@t:4px;@n:bounce){
  ._keyframes(@n);
  .-frames(@-...){
  0%, 20%, 53%, 80%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  @{-}transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  @{-}transform: translate3d(0, -@t*8, 0);
  }
  70% {
    @{-}transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  @{-}transform: translate3d(0, -@t*4, 0);
  }
  90% {
    @{-}transform: translate3d(0, -@t, 0);
  }
}
}
.flash(){
  ._keyframes(flash);
  .-frames(@-...){
  0%, 50%, 100% {
    ._opacity(100);
  }
  25%, 75% {
    ._opacity(0);
  }
}
}
.pulse(@t:1.05;@n:pulse){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }
  50% {
    @{-}transform: scale3d(@t, @t, @t);
  }
  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}

.rubberBand(){
  ._keyframes(rubberBand);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }

  30% {
    @{-}transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    @{-}transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    @{-}transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    @{-}transform: scale3d(.95, 1.05, 1);
  }

  75% {
    @{-}transform: scale3d(1.05, .95, 1);
  }

  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.shake(@x:10px;@n:shake){
  ._keyframes(@n);
  .-frames(@-...){
  0%, 100% {
    @{-}transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    @{-}transform: translate3d(-@x, 0, 0);
  }

  20%, 40%, 60%, 80% {
    @{-}transform: translate3d(@x, 0, 0);
  }
}
}
.swing(@d:5deg;@n:swing){
  ._keyframes(@n);
  .-frames(@-...){
  20% {
    @{-}transform: rotate3d(0, 0, 1, @d*3);
  }

  40% {
    @{-}transform: rotate3d(0, 0, 1, -@d*2);
  }

  60% {
    @{-}transform: rotate3d(0, 0, 1, @d);
  }

  80% {
    @{-}transform: rotate3d(0, 0, 1, -@d);
  }

  100% {
    @{-}transform: rotate3d(0, 0, 1, 0deg);
  }
}
}
.tada(){
  ._keyframes(tada);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    @{-}transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    @{-}transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.wobble(@d:1deg;@n:wobble){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform: none;
  }

  15% {
    @{-}transform: translate(-25%, 0) rotate3d(0, 0, 1, -@d*5);
  }

  30% {
    @{-}transform: translate(20%, 0) rotate3d(0, 0, 1, @d*3);
  }

  45% {
    @{-}transform: translate(-15%, 0) rotate3d(0, 0, 1, -@d*3);
  }

  60% {
    @{-}transform: translate(10%, 0) rotate3d(0, 0, 1, @d*2);
  }

  75% {
    @{-}transform: translate(-5%, 0) rotate3d(0, 0, 1, -@d);
  }

  100% {
    @{-}transform: none;
  }
}
}

.wobbleTop(@d:1deg;@n:wobbleTop){
  ._keyframes(@n);
  .-frames(@-...){
  0%{
    @{-}transform: skew(0);
  @{-}transform-origin:bottom;
  }
  16.65% {
    @{-}transform: skew(-12deg);
  @{-}transform-origin:bottom;
  }

  33.3% {
    @{-}transform: skew(10deg);
  @{-}transform-origin:bottom;
  }

  49.95% {
    @{-}transform: skew(-6deg);
  @{-}transform-origin:bottom;
  }

  66.6% {
    @{-}transform: skew(4deg);
  @{-}transform-origin:bottom;
  }

  83.25% {
    @{-}transform: skew(-2deg);
  @{-}transform-origin:bottom;
  }

  100% {
    @{-}transform: skew(0);
  @{-}transform-origin:bottom;
  }
}
}
.wobbleBottom(@d:1deg;@n:wobbleBottom){
  ._keyframes(@n);
  .-frames(@-...){
  0%{
    @{-}transform: skew(0);
  @{-}transform-origin:top;
  }
  16.65% {
    @{-}transform: skew(-12deg);
  @{-}transform-origin:top;
  }

  33.3% {
    @{-}transform: skew(10deg);
  @{-}transform-origin:top;
  }

  49.95% {
    @{-}transform: skew(-6deg);
  @{-}transform-origin:top;
  }

  66.6% {
    @{-}transform: skew(4deg);
  @{-}transform-origin:top;
  }

  83.25% {
    @{-}transform: skew(-2deg);
  @{-}transform-origin:top;
  }

  100% {
    @{-}transform: skew(0);
  @{-}transform-origin:top;
  }
}
}
.wobbleSkew(@d:1deg;@n:wobbleSkew){
  ._keyframes(@n);
  .-frames(@-...){
  16.65% {
    @{-}transform: skew(-12deg);
  }

  33.3% {
    @{-}transform: skew(10deg);
  }

  49.95% {
    @{-}transform: skew(-6deg);
  }

  66.6% {
    @{-}transform: skew(4deg);
  }

  83.25% {
    @{-}transform: skew(-2deg);
  }

  100% {
    @{-}transform: skew(0);
  }
}
}


.bounceIn(){
  ._keyframes(bounceIn);
  .-frames(@-...){
  0%, 20%, 40%, 60%, 80%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    ._opacity(0);
    @{-}transform: scale3d(.3, .3, .3);
  }

  20% {
    @{-}transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    @{-}transform: scale3d(.9, .9, .9);
  }

  60% {
    ._opacity(100);
    @{-}transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    @{-}transform: scale3d(.97, .97, .97);
  }

  100% {
    ._opacity(100);
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.bounceInDown(){
  ._keyframes(bounceInDown);
  .-frames(@-...){
  0%, 60%, 75%, 90%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, -3000px, 0);
  }

  60% {
    ._opacity(100);
    @{-}transform: translate3d(0, 25px, 0);
  }

  75% {
    @{-}transform: translate3d(0, -10px, 0);
  }

  90% {
    @{-}transform: translate3d(0, 5px, 0);
  }

  100% {
    @{-}transform: none;
  }
}
}
.bounceInLeft(){
  ._keyframes(bounceInLeft);
  .-frames(@-...){
  0%, 60%, 75%, 90%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    ._opacity(0);
    @{-}transform: translate3d(-3000px, 0, 0);
  }

  60% {
    ._opacity(100);
    @{-}transform: translate3d(25px, 0, 0);
  }

  75% {
    @{-}transform: translate3d(-10px, 0, 0);
  }

  90% {
    @{-}transform: translate3d(5px, 0, 0);
  }

  100% {
    @{-}transform: none;
  }
}
}
.bounceInRight(){
  ._keyframes(bounceInRight);
  .-frames(@-...){
  0%, 60%, 75%, 90%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    ._opacity(0);
    @{-}transform: translate3d(3000px, 0, 0);
  }

  60% {
    ._opacity(100);
    @{-}transform: translate3d(-25px, 0, 0);
  }

  75% {
    @{-}transform: translate3d(10px, 0, 0);
  }

  90% {
    @{-}transform: translate3d(-5px, 0, 0);
  }

  100% {
    @{-}transform: none;
  }
}
}
.bounceInUp(){
  ._keyframes(bounceInUp);
  .-frames(@-...){
  0%, 60%, 75%, 90%, 100% {
    @{-}transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, 3000px, 0);
  }

  60% {
    ._opacity(100);
    @{-}transform: translate3d(0, -20px, 0);
  }

  75% {
    @{-}transform: translate3d(0, 10px, 0);
  }

  90% {
    @{-}transform: translate3d(0, -5px, 0);
  }

  100% {
    @{-}transform: translate3d(0, 0, 0);
  }
}
}
.bounceOut(){
  ._keyframes(bounceOut);
  .-frames(@-...){
  20% {
    @{-}transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    ._opacity(100);
    @{-}transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    ._opacity(0);
    @{-}transform: scale3d(.3, .3, .3);
  }
}
}
.bounceOutDown(){
  ._keyframes(bounceOutDown);
  .-frames(@-...){
  20% {
    @{-}transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    ._opacity(100);
    @{-}transform: translate3d(0, -20px, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, 2000px, 0);
  }
}
}
.bounceOutLeft(){
  ._keyframes(bounceOutLeft);
  .-frames(@-...){
  20% {
    ._opacity(100);
    @{-}transform: translate3d(20px, 0, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(-2000px, 0, 0);
  }
}
}
.bounceOutRight(){
  ._keyframes(bounceOutRight);
  .-frames(@-...){
  20% {
    ._opacity(100);
    @{-}transform: translate3d(-20px, 0, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(2000px, 0, 0);
  }
}
}
.bounceOutUp(){
  ._keyframes(bounceOutUp);
  .-frames(@-...){
  20% {
    @{-}transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    ._opacity(100);
    @{-}transform: translate3d(0, 20px, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, -2000px, 0);
  }
}
}
.fadeIn(@x: 0;@y: 0;@n: fadeIn){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(@x, @y, 0);
  }
  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInDown(){
  ._keyframes(fadeInDown);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, -100%, 0);
  }
  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInDownBig(){
  ._keyframes(fadeInDownBig);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, -2000px, 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}

.fadeInLeft(){
  ._keyframes(fadeInLeft);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(-100%, 0, 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInLeftBig(){
  ._keyframes(fadeInLeftBig);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(-2000px, 0, 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInRight(){
  ._keyframes(fadeInRight);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate(100%, 0,);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInRightBig(){
  ._keyframes(fadeInRightBig);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(2000px, 0, 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInUp(){
  ._keyframes(fadeInUp);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, 100%, 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.fadeInUpBig(){
  ._keyframes(fadeInUpBig);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(0, 2000px , 0);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}

.fadeOut(@x: 0;@y: 0;@n: fadeOut){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    ._opacity(0);
    @{-}transform: translate3d(@x, @y, 0);
  }
}
}
.fadeOutDown(){
  ._keyframes(fadeOutDown);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, 100%, 0);
  }
}
}
.fadeOutDownBig(){
  ._keyframes(fadeOutDownBig);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, 2000px, 0);
  }
}
}
.fadeOutLeft(){
  ._keyframes(fadeOutLeft);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(-100%, 0, 0);
  }
}
}
.fadeOutLeftBig(){
  ._keyframes(fadeOutLeftBig);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    ._opacity(0);
    @{-}transform: translate3d(-2000px, 0, 0);
  }
}
}
.fadeOutRight(){
  ._keyframes(fadeOutRight);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    ._opacity(0);
    @{-}transform: translate3d(100%, 0, 0);
  }
}
}
.fadeOutRightBig(){
  ._keyframes(fadeOutRightBig);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(2000px, 0, 0);
  }
}
}
.fadeOutUp(){
  ._keyframes(fadeOutUp);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, -100%, 0);
  }
}
}
.fadeOutUpBig(){
  ._keyframes(fadeOutUpBig);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(0, -2000px, 0);
  }
}
}
.flip(){
  ._keyframes(flip);
  .-frames(@-...){
  0% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  @{-}animation-timing-function: ease-out;
  }

  40% {
    @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  @{-}animation-timing-function: ease-out;
  }

  50% {
    @{-}transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  @{-}animation-timing-function: ease-in;
  }

  80% {
    @{-}transform: perspective(400px) scale3d(.95, .95, .95);
  @{-}animation-timing-function: ease-in;
  }

  100% {
    @{-}transform: perspective(400px);
  @{-}animation-timing-function: ease-in;
  }
}
}
.flipInX(){
  ._keyframes(flipInX);
  .-frames(@-...){
  0% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  @{-}transition-timing-function: ease-in;
  .opacity(0);
  }

  40% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  @{-}transition-timing-function: ease-in;
  }

  60% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  .opacity(100);
  }

  80% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    @{-}transform: perspective(400px);
  }
}
}
.flipInY(){
  ._keyframes(flipInY);
  .-frames(@-...){
  0% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  @{-}transition-timing-function: ease-in;
  .opacity(0);
  }

  40% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  @{-}transition-timing-function: ease-in;
  }

  60% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  .opacity(100);
  }

  80% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    @{-}transform: perspective(400px);
  }
}
}
.flipOutX(){
  ._keyframes(flipOutX);
  .-frames(@-...){
  0% {
    @{-}transform: perspective(400px);
  }

  30% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  .opacity(100);
  }

  100% {
    @{-}transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  .opacity(0);
  }
}
}
.flipOutY(){
  ._keyframes(flipOutY);
  .-frames(@-...){
  0% {
    @{-}transform: perspective(400px);
  }

  30% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
  .opacity(100);
  }

  100% {
    @{-}transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  .opacity(0);
  }
}
}

//scale
.scaleIn(){
  ._keyframes(scaleIn);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(0, 0, 1);
  }

  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.scaleInX(){
  ._keyframes(scaleInX);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(0, 1, 1);
  }

  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.scaleInY(){
  ._keyframes(scaleInY);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 0, 1);
  }

  100% {
    @{-}transform: scale3d(1, 1, 1);
  }
}
}
.scaleOut(){
  ._keyframes(scaleOut);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }

  100% {
    @{-}transform: scale3d(0, 0, 1);
  }
}
}
.scaleOutX(){
  ._keyframes(scaleOutX);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }

  100% {
    @{-}transform: scale3d(0, 1, 1);
  }
}
}
.scaleOutY(){
  ._keyframes(scaleOutY);
  .-frames(@-...){
  0% {
    @{-}transform: scale3d(1, 1, 1);
  }

  100% {
    @{-}transform: scale3d(1, 0, 1);
  }
}
}

.lightSpeedInLeft(){
  ._keyframes(lightSpeedInLeft);
  .-frames(@-...){
  0% {
    @{-}transform: translate3d(-100%, 0, 0) skewX(30deg);
  .opacity(0);
  }

  60% {
    @{-}transform: skewX(-20deg);
  .opacity(100);
  }

  80% {
    @{-}transform: skewX(5deg);
  .opacity(100);
  }

  100% {
    @{-}transform: none;
  .opacity(100);
  }
}
}
.lightSpeedInRight(){
  ._keyframes(lightSpeedInRight);
  .-frames(@-...){
  0% {
    @{-}transform: translate3d(100%, 0, 0) skewX(-30deg);
  .opacity(0);
  }

  60% {
    @{-}transform: skewX(20deg);
  .opacity(100);
  }

  80% {
    @{-}transform: skewX(-5deg);
  .opacity(100);
  }

  100% {
    @{-}transform: none;
  .opacity(100);
  }
}
}
.lightSpeedOutLeft(){
  ._keyframes(lightSpeedOutLeft);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    @{-}transform: translate(-100%, 0) skewX(-30deg);
  .opacity(0);
  }
}
}
.lightSpeedOutRight(){
  ._keyframes(lightSpeedOutRight);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }
  100% {
    @{-}transform: translate(100%, 0) skewX(30deg);
  .opacity(0);
  }
}
}
.rotateIn(){
  ._keyframes(rotateIn);
  .-frames(@-...){
  0% {
    @{-}transform-origin: center;
  @{-}transform: rotate3d(0, 0, 1, -200deg);
  .opacity(0);
  }

  100% {
    @{-}transform-origin: center;
  @{-}transform: none;
  .opacity(100);
  }
}
}
.rotateInDownLeft(){
  ._keyframes(rotateInDownLeft);
  .-frames(@-...){
  0% {
    @{-}transform-origin: left bottom;
  @{-}transform: rotate3d(0, 0, 1, -45deg);
  .opacity(0);
  }

  100% {
    @{-}transform-origin: left bottom;
  @{-}transform: none;
  .opacity(100);
  }
}
}
.rotateInDownRight(){
  ._keyframes(rotateInDownRight);
  .-frames(@-...){
  0% {
    @{-}transform-origin: right bottom;
  @{-}transform: rotate3d(0, 0, 1, 45deg);
  .opacity(0);
  }
  100% {
    @{-}transform-origin: right bottom;
  @{-}transform: none;
  .opacity(100);
  }
}
}
.rotateInUpLeft(){
  ._keyframes(rotateInUpLeft);
  .-frames(@-...){
  0% {
    @{-}transform-origin: left bottom;
  @{-}transform: rotate3d(0, 0, 1, 45deg);
  .opacity(0);
  }

  100% {
    @{-}transform-origin: left bottom;
  @{-}transform: none;
  .opacity(100);
  }
}
}
.rotateInUpRight(){
  ._keyframes(rotateInUpRight);
  .-frames(@-...){
  0% {
    @{-}transform-origin: right bottom;
  @{-}transform: rotate3d(0, 0, 1, -90deg);
  .opacity(0);
  }

  100% {
    @{-}transform-origin: right bottom;
  @{-}transform: none;
  .opacity(100);
  }
}
}
.rotateOut(){
  ._keyframes(rotateOut);
  .-frames(@-...){
  0% {
    @{-}transform-origin: center;
  .opacity(100);
  }

  100% {
    @{-}transform-origin: center;
  @{-}transform: rotate3d(0, 0, 1, 200deg);
  .opacity(0);
  }
}
}

.rotateOutDownLeft(){
  ._keyframes(rotateOutDownLeft);
  .-frames(@-...){
  0% {
    @{-}transform-origin: left bottom;
  .opacity(100);
  }

  100% {
    @{-}transform-origin: left bottom;
  @{-}transform: rotate3d(0, 0, 1, 45deg);
  .opacity(0);
  }
}
}
.rotateOutDownRight(){
  ._keyframes(rotateOutDownRight);
  .-frames(@-...){
  0% {
    @{-}transform-origin: right bottom;
  .opacity(100);
  }

  100% {
    @{-}transform-origin: right bottom;
  @{-}transform: rotate3d(0, 0, 1, -45deg);
  .opacity(0);
  }
}
}
.rotateOutUpLeft(){
  ._keyframes(rotateOutUpLeft);
  .-frames(@-...){
  0% {
    @{-}transform-origin: left bottom;
  .opacity(100);
  }

  100% {
    @{-}transform-origin: left bottom;
  @{-}transform: rotate3d(0, 0, 1, -45deg);
  .opacity(0);
  }
}
}
.rotateOutUpRight(){
  ._keyframes(rotateOutUpRight);
  .-frames(@-...){
  0% {
    @{-}transform-origin: right bottom;
  .opacity(100);
  }

  100% {
    @{-}transform-origin: right bottom;
  @{-}transform: rotate3d(0, 0, 1, 90deg);
  .opacity(0);
  }
}
}

// Specials
.hingeLeft(){
  ._keyframes(hingeLeft);
  .-frames(@-...){
  0% {
    @{-}transform-origin: top left;
  @{-}animation-timing-function: ease-in-out;
  }

  20%, 60% {
    @{-}transform: rotate3d(0, 0, 1, 80deg);
  @{-}transform-origin: top left;
  @{-}animation-timing-function: ease-in-out;
  }

  40%, 80% {
    @{-}transform: rotate3d(0, 0, 1, 60deg);
  @{-}transform-origin: top left;
  @{-}animation-timing-function: ease-in-out;
  .opacity(100);
  }

  100% {
    @{-}transform: translate3d(0, 700px, 0);
  .opacity(0);
  }
}
}
.hingeRight(){
  ._keyframes(hingeRight);
  .-frames(@-...){
  0% {
    @{-}transform-origin: top right;
  @{-}animation-timing-function: ease-in-out;
  }

  20%, 60% {
    @{-}transform: rotate3d(0, 0, 1, -80deg);
  @{-}transform-origin: top right;
  @{-}animation-timing-function: ease-in-out;
  }

  40%, 80% {
    @{-}transform: rotate3d(0, 0, 1, -60deg);
  @{-}transform-origin: top right;
  @{-}animation-timing-function: ease-in-out;
  .opacity(100);
  }

  100% {
    @{-}transform: translate3d(0, 700px, 0);
  .opacity(0);
  }
}
}
.rollInLeft(){
  ._keyframes(rollInLeft);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.rollInRight(){
  ._keyframes(rollInRight);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }

  100% {
    ._opacity(100);
    @{-}transform: none;
  }
}
}
.rollOutLeft(){
  ._keyframes(rollOutLeft);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
}
}
.rollOutRight(){
  ._keyframes(rollOutRight);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  100% {
    ._opacity(0);
    @{-}transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
}
.zoomIn(){
  ._keyframes(zoomIn);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: scale3d(.3, .3, .3);
  }

  50% {
    ._opacity(100);
  }
}
}
.zoomInDown(){
  ._keyframes(zoomInDown);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}
.zoomInLeft(){
  ._keyframes(zoomInLeft);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}
.zoomInRight(){
  ._keyframes(zoomInRight);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}
.zoomInUp(){
  ._keyframes(zoomInUp);
  .-frames(@-...){
  0% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}
.zoomOut(){
  ._keyframes(zoomOut);
  .-frames(@-...){
  0% {
    ._opacity(100);
  }

  50% {
    ._opacity(0);
    @{-}transform: scale3d(.3, .3, .3);
  }

  100% {
    ._opacity(0);
  }
}
}
.zoomOutDown(){
  ._keyframes(zoomOutDown);
  .-frames(@-...){
  40% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
  @{-}transform-origin: center bottom;
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}
.zoomOutLeft(){
  ._keyframes(zoomOutLeft);
  .-frames(@-...){
  40% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: scale(.1) translate3d(-2000px, 0, 0);
  @{-}transform-origin: left center;
  }
}
}
.zoomOutRight(){
  ._keyframes(zoomOutRight);
  .-frames(@-...){
  40% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    ._opacity(0);
    @{-}transform: scale(.1) translate3d(2000px, 0, 0);
  @{-}transform-origin: right center;
  }
}
}
.zoomOutUp(){
  ._keyframes(zoomOutUp);
  .-frames(@-...){
  40% {
    ._opacity(100);
    @{-}transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  @{-}animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    ._opacity(0);
    @{-}transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  @{-}transform-origin: center bottom;
  @{-}animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}
}

// turnIn
.turnInDown(@p: 600px;@n:turnInDown){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateX(180deg);
  .opacity(0);
  @{-}transform-origin:50% 0;
  }
  100% {
    @{-}transform:perspective(@p) rotateX(0deg);
  .opacity(100);
  @{-}transform-origin:50% 0;
  }
}
}
.turnInUp(@p: 600px;@n:turnInUp){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateX(-180deg);
  .opacity(0);
  @{-}transform-origin:50% 100%;
  }
  100% {
    @{-}transform:perspective(@p) rotateX(0deg);
  .opacity(100);
  @{-}transform-origin:50% 100%;
  }
}
}
.turnInLeft(@p: 1300px;@n:turnInLeft){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateY(-180deg);
  .opacity(0);
  @{-}transform-origin:0 50%;
  }
  100% {
    @{-}transform:perspective(@p) rotateY(0deg);
  .opacity(100);
  @{-}transform-origin:0 50%;
  }
}
}
.turnInRight(@p: 1300px;@n:turnInRight){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateY(180deg);
  .opacity(0);
  @{-}transform-origin:100% 50%;
  }
  100% {
    @{-}transform:perspective(@p) rotateY(0deg);
  .opacity(100);
  @{-}transform-origin:100% 50%;
  }
}
}

.turnOutDown(@p: 600px;@n:turnOutDown){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateX(0deg);
  .opacity(100);
  @{-}transform-origin:50% 100%;
  }
  100% {
    @{-}transform:perspective(@p) rotateX(-180deg);
  .opacity(0);
  @{-}transform-origin:50% 100%;
  }
}
}
.turnOutUp(@p: 600px;@n:turnOutUp){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateX(0deg);
  .opacity(100);
  @{-}transform-origin:50% 0;
  }
  100% {
    @{-}transform:perspective(@p) rotateX(180deg);
  .opacity(0);
  @{-}transform-origin:50% 0;
  }
}
}
.turnOutLeft(@p: 1300px;@n:turnOutLeft){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateY(0deg);
  .opacity(100);
  @{-}transform-origin:0 50%;
  }
  100% {
    @{-}transform:perspective(@p) rotateY(-180deg);
  .opacity(0);
  @{-}transform-origin:0 50%;
  }
}
}
.turnOutRight(@p: 1300px;@n:turnOutRight){
  ._keyframes(@n);
  .-frames(@-...){
  0% {
    @{-}transform:perspective(@p) rotateY(0deg);
  .opacity(100);
  @{-}transform-origin:100% 50%;
  }
  100% {
    @{-}transform:perspective(@p) rotateY(180deg);
  .opacity(0);
  @{-}transform-origin:100% 50%;
  }
}
}
